Mostrar - ocultar

La inquietud de Elizabetha me ha llevado a crear esta entrada, ella desea añadir a su sidebar una especie de desplegable donde incluir botones. En un principio le hablé de los bloques animados pero después pensé que también podíamos hacerlo de otro modo sin necesidad de alojar archivos externos.
Lo que vamos a hacer será reducir el código del menú desplegable de manera que clicando en una imagen o texto mostrará los botones que a simple vista estarán ocultos lo que ahorrará espacio y dará un aspecto más despejado a la sidebar.
Comenzaremos situándonos en Plantilla/Edición HTML y justo antes de </HEAD> añadiremos lo siguiente:

<!-- desplegable -->
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<!--desplegable -->

Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:

<a href="javascript:void(0);" onclick="expandcollapse('Botones')"><img src="url-de-la-imagen"/></a>
<ul id="Botones" class="texthidden">

<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
<a href="aquilaurldelapagina"><img src="aquilaurldelaimagen"/></a>
</ul>

Si deseamos añadir este efecto de mostrar-ocultar más de una vez en nuestro blog deberemos cambiar el nombre "id" para que no se repita. En el código yo le puse "botones" podéis añadir cualquier otro, da igual el que sea.

El resultado sería más o menos así:

Aquí más botones.............

Modificaremos las partes del código en negrita para añadir la url de la página y las imágenes.

No hay límite para añadir enlaces o botones, bastará con repetir el código que contiene la url de la página y el-los enlaces.

Cerraremos siempre el código del desplegable con la etiqueta </ul> de lo contrario se mostrará la parte oculta.


En respuesta a Hiro-Valiandfly sobre la forma de añadir este efecto en las entradas para ocultar un texto y que en vez de un botón el enlace sea también un texto esta es la solución:

Añadimos el Script de la plantilla antes de </HEAD>

Luego editamos la entrada como de costumbre, escribimos la entrada hasta llegar al lugar que vamos a ocultar y añadimos lo siguiente:

<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>
<ul id="cualquiercosa" class="texthidden">
Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-
</ul>

Donde "cualquiercosa" es un nombre cualquiera que no deberemos repetir si agregamos este código más de una vez en nuestro blog. Podemos añadirlo cuantas veces deseamos pero con un nombre diferente.

Un Ejemplo:

¿Qué cosa posee el hombre que nadie la puede ver?
Sin alas vuela hasta el cielo y es la causa del saber.

Ver solución

(El pensamiento)